<style type="text/css">
    .selected-search {
        box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
        height: 200px;
        width: 260px;
        position: relative;
        border-radius: 4px;
    }

    .ivu-form-item {
        /*width: 30% !important;*/
    }

    .selected-search .search-action {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
    }

    .selected-search .selected-arr {
        position: absolute;
        top: 50px;
        left: 20px;
        right: 20px;
        bottom: 10px;
        overflow: scroll;
    }

    .select-click {
        border: 1px solid #dddee1;
        border-radius: 4px;
        padding: 0 10px;
        margin-bottom: 10px;
    }

    .selected-search .selected-arr .selected-item {
        /*border-bottom: 1px solid #dfdfdf;*/
    }

    .demo-upload-list {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        margin-right: 4px;
    }

    .demo-upload-list img {
        width: 100%;
        height: 100%;
    }

    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
    }

    .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
    }

    .demo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
</style>
<template>
    <div style="width: 58%">
        <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="right" :label-width="100"
                :inline="true">
            <Tabs active-key="key1">
                <Tab-pane label="基本信息" key="key1">
                    <Row>
                        <Col span="12">
<!--                            <Form-item label="人脸识别id" prop="Faceid">-->
<!--                                <i-input v-model="formValidate.Faceid" style="width:200px"-->
<!--                                         placeholder="请输入自有编号(必填)"></i-input>-->
<!--                            </Form-item>-->
                        </Col>
                        <Col span="12">
                            <Form-item label="姓名" prop="Displayname">
                                <i-input v-model="formValidate.Displayname" style="width:200px"
                                         placeholder="请输入姓名(必填)"></i-input>
                            </Form-item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <Form-item label="人员性别" prop="Sex">
                                <i-select v-model="formValidate.Sex" placeholder="请选择性别(必填)" style="width:200px">
                                    <i-option value="男">男</i-option>
                                    <i-option value="女">女</i-option>
                                </i-select>
                            </Form-item>
                        </Col>
                        <Col span="12">
                            <Form-item label="人员类型" prop="Rightlevelid">
                                <i-select v-model="formValidate.Rightlevelid" placeholder="请选择适用人员类型"
                                          style="width:200px">
                                    <template v-for="(item,index) in RightlevelidArr">
                                        <i-option :value="item.Id">{{item.Levelname}}</i-option>
                                    </template>
                                </i-select>
                            </Form-item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <Form-item label="单位" prop="TopTitle">
                                <input v-model="formValidate.TopTitle"
                                       style="border: 1px solid #f0f0f0;padding: 0 23px;border-radius: 4px;width: 200px"
                                       placeholder="点击选择单位(必填)"
                                       @click="openUnitModel()">
                            </Form-item>
                        </Col>
                        <Col span="12">
                            <Form-item label="部门" prop="orgTitle">
                                <input v-model="formValidate.orgTitle"
                                       style="border: 1px solid #f0f0f0;padding: 0 23px;border-radius: 4px;width: 200px"
                                       placeholder="点击选择部门(必填)"
                                       @click="openOrgModel()">
                            </Form-item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <Form-item label="职务" prop="Duty">
                                <i-select v-model="formValidate.Duty" placeholder="请选择职务" style="width:200px">
                                    <template v-for="(item,index) in dutyArr">
                                        <i-option :value="item.Configvalue">{{item.Configvalue}}</i-option>
                                    </template>
                                </i-select>
                            </Form-item>
                        </Col>
                        <Col span="12">
                            <Form-item label="电话" prop="Phone">
                                <i-input v-model="formValidate.Phone" style="width: 200px"
                                         placeholder="请输入电话(必填)"></i-input>
                            </Form-item>
                        </Col>
                    </Row>

                    <Row>
                        <Col span="12">
                            <Form-item label="军衔" prop="Militaryrank">
                                <i-select v-model="formValidate.Militaryrank" placeholder="请选择军衔" style="width:200px">
                                    <template v-for="(item,index) in militaryRankArr">
                                        <i-option :value="item.Configvalue">{{item.Configvalue}}</i-option>
                                    </template>
                                </i-select>
                            </Form-item>
                        </Col>
                        <Col span="12">
                            <Form-item label="身份证号" prop="IdNumber">
                                <i-input v-model="formValidate.IdNumber" type="number" style="width: 200px;"
                                         placeholder="请输入证件号"></i-input>
                            </Form-item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <Form-item label="军官证号" prop="Officernumber">
                                <i-input v-model="formValidate.Officernumber" type="number" style="width: 200px;"
                                         placeholder="请输入证件号"></i-input>
                            </Form-item>
                        </Col>
                        <Col span="12">
                            <Form-item label="入伍时间">
                                <Row>
                                    <i-col span="11">
                                        <Date-picker type="datetime" placeholder="选择入伍时间" value=""
                                                     @on-change="changeStartDate" style="width:200px"></Date-picker>
                                    </i-col>
                                </Row>
                            </Form-item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span="12">
                            <Form-item label="一卡通编号" prop="Cardid">
                                <i-input v-model="formValidate.Cardid" style="width: 200px"
                                         placeholder="请输入一卡通编号"></i-input>
                            </Form-item>
                        </Col>
                        <Col span="12">
                            <!--                            <Form-item label="允许通行门区" prop="allowgates">-->
                            <!--                                <i-select style="width:200px" placeholder="选择允许通行门区" multiple :model.sync="formValidate.Gates"-->
                            <!--                                          filterable @on-change="checkChangeGate">-->
                            <!--                                    <i-option v-for="item in geteListArr" :value="item.Id">{{ item.Gatename }}</i-option>-->
                            <!--                                </i-select>-->
                            <!--                            </Form-item>-->
<!--                            <Form-item label="分配账号吗：">-->
<!--                                <Radio-group v-model="formValidate.isLogin">-->
<!--                                    <Radio label="1">是</Radio>-->
<!--                                    <Radio label="2">否</Radio>-->
<!--                                </Radio-group>-->
<!--                            </Form-item>-->
                        </Col>
                    </Row>
                    <!--                    上传图片-->
                    <Form-item label="照片" prop="image">
                        <div class="demo-upload-list" v-for="item in imageList">
                            <template v-if="item.status === 'finished'">
                                <img :src="apiUtilBase + item.response.Msg">
                                <div class="demo-upload-list-cover">
                                    <Icon type="ios-eye-outline"
                                          @click="handleView(apiUtilBase + item.response.Msg)"></Icon>
                                    <Icon type="ios-trash-outline" @click="handleRemove(item)"></Icon>
                                </div>
                            </template>
                            <template v-else>
                                <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                            </template>
                        </div>
                        <Upload ref="upload"
                                :show-upload-list="false"
                                :default-file-list="defaultList"
                                :on-success="handleSuccess"
                                :format="['jpg','jpeg','png']"
                                :max-size="2048"
                                :name="'uploadFile'"
                                :on-format-error="handleFormatError"
                                :on-exceeded-size="handleMaxSize"
                                :before-upload="handleBeforeUpload"
                                multiplelayout-content
                                type="drag"
                                :action="upLoadFile"
                                style="display: inline-block;width:58px;">
                            <div style="width: 58px;height:58px;line-height: 58px;">
                                <Icon type="camera" size="20"></Icon>
                            </div>
                        </Upload>
                        <Modal title="查看图片" v-model="visible">
                            <img :src="seeImg" v-if="visible" style="width: 100%">
                        </Modal>
                    </Form-item>

                </Tab-pane>
                <Tab-pane label="扩展信息" key="key2">
                    <Form-item label="籍贯" prop="Birthfromwhere">
                        <i-input v-model="formValidate.Birthfromwhere" placeholder="请输入籍贯"></i-input>
                    </Form-item>
                    <Form-item label="学历" prop="Edurank">
                        <i-select v-model="formValidate.Edurank" placeholder="请选择学历" style="width:200px">
                            <template v-for="(item,index) in EdurankArr">
                                <i-option :value="item">{{item}}</i-option>
                            </template>
                        </i-select>
                    </Form-item>
                    <Form-item label="备注" prop="remarks">
                        <i-input v-model="formValidate.remarks" placeholder="请输入备注"></i-input>
                    </Form-item>
                </Tab-pane>
<!--                <Tab-pane v-if="formValidate.isLogin == 1" label="登录信息" key="key3">-->
<!--                    <Form-item label="登录名" prop="Account">-->
<!--                        <i-input v-model="formValidate.Account" placeholder="请输入登录名"></i-input>-->
<!--                    </Form-item>-->
<!--                    <Form-item label="登录密码" prop="Mypwd">-->
<!--                        <i-input v-model="formValidate.Mypwd" type="password" placeholder="请输入登录密码"></i-input>-->
<!--                    </Form-item>-->
<!--                    <Form-item label="再次输入密码" prop="">-->
<!--                        <Input type="password" placeholder="请输入再次输入登录密码"></Input>-->
<!--                    </Form-item>-->
<!--                </Tab-pane>-->
            </Tabs>
            <Form-item>
                <i-button @click="handleSubmit('formValidate')" type="primary">提交</i-button>
                <i-button @click="jumpPage('','UserList')" style="margin-left: 8px">返回</i-button>
            </Form-item>
        </i-form>
        <Modal v-model="isShowModal" title="下面列表选择单位" @on-ok=""
               @on-cancel="isShowModal =false">
            <Tree :show-checkbox="showCheckbox"  :data="mainorgData" @on-select-change="mainOrgClickEvent"></Tree>
        </Modal>
        <Modal v-model="isShowModal2" title="下面列表选择部门" @on-ok=""
               @on-cancel="isShowModal2 =false">
            <Tree :show-checkbox="showCheckbox"   :data="orgData" @on-select-change="orgClickEvent"></Tree>
        </Modal>
    </div>
</template>

<script>

    import apiUtil from '../../assets/utils/api_util';
    import baseUtil from '../../assets/utils/base-util';
    import selectSearch from '../../components/selectSearch';


    export default {
        data() {
            return {
                //单位选择树形
                showCheckbox: false,
                isShowModal: false,
                mainorgData: [],
                //单位名称、id
                TopTitle: '',
                TopId: '',
                //组织选择树形
                isShowModal2: false,
                orgData: [],
                //部门名称、id
                Partid: '',
                orgTitle: '',
                //表单字段
                formValidate: {
                    //添加字段
                    Displayname: '',
                    TopTitle: "",
                    // Faceid: '',
                    orgTitle: '',
                    Sex: '',
                    Duty: '',
                    Joindate: '',
                    Cardid: '',
                    Paperid: '',
                    Rightlevelid: '',
                    // isLogin: '2',
                    Militaryrank: '',
                    Gates: '',
                    Phone: '',
                    IdNumber: '',
                    Officernumber: '',
                    //登录
                    // Mypwd: '',
                    // Account: '',
                    //拓展信息
                    Birthfromwhere: '',
                    Edurank: '',
                    remarks: '',
                },
                ruleValidate: {
                    Code: [
                        {required: true, message: '编号不能为空', trigger: 'blur'}
                    ],
                    Displayname: [
                        {required: true, message: '姓名不能为空', trigger: 'blur'}
                    ],
                    Sex: [
                        {required: true, message: '性别不能为空', trigger: 'blur'}
                    ],
                    Rightlevelid: [
                        {required: true, message: '人员类型不能为空', trigger: 'blur'}
                    ],
                    TopTitle: [
                        {required: true, message: '单位不能为空', trigger: 'blur'}
                    ],
                    orgTitle: [
                        {required: true, message: '部门不能为空', trigger: 'blur'}
                    ],
                },
                //人员类型
                RightlevelidArr: [],
                //某单位下部门
                orgArr: [],
                //门区列表
                geteListArr: [],
                //军衔列表
                militaryRankArr: [],
                //职务列表
                dutyArr: [],
                //图片
                defaultList: [],
                imageList: '',
                imagePost: [],
                visible: false,
                seeImg: '',
                upLoadFile: apiUtil.urls.UploadFile,
                apiUtilBase: apiUtil.urls.baseUrl,
                //新创建人员id
                newUserId: '',
                //学历
                EdurankArr: [
                    '小学', '初中', '高中', '中专', '大专', '本科', '研究生', '博士'
                ]
            }
        },
        mounted: function () {
            this.getRightlevelidData();
            this.getGateList();
            this.getDutyData();
            this.getMilitaryRankData();
        },
        components: {
            selectSearch,
        },
        methods: {
            jumpPage: function (id, url) {
                this.$router.back(-1)
            },
            //获取适用人员类型
            getRightlevelidData: function () {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetPeopleTypes, params, function (res) {
                    that.$Loading.finish();
                    that.RightlevelidArr = res.Msg;

                    console.log('res:', res)
                });

            },

            //获取门区信息
            getGateList() {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);


                apiUtil.get(that, apiUtil.urls.GateServerList, para, function (res) {
                    that.geteListArr = res.Msg;
                });

            },
            //获取军衔
            getMilitaryRankData: function () {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                apiUtil.get(that, apiUtil.urls.RankList, params, function (res) {
                    that.militaryRankArr = res.Msg;

                    console.log('res:', res)
                });


            },
            //获取职务
            getDutyData: function () {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);


                apiUtil.get(that, apiUtil.urls.DutyList, params, function (res) {
                    that.$Loading.finish();
                    that.dutyArr = res.Msg;
                    console.log('res:', res)
                });
            },
            //打开选择单位模态框
            openUnitModel:function(){
                let that =this;
                that.getMainOrgData();
            },
            //打开选择部门模态框
            openOrgModel:function(){
                let that =this;
                if(this.TopId){
                    this.isShowModal2= true;
                }else {
                    that.$Notice.open({
                        title: '提示',
                        desc: '请添加单位过后再选择部门。'
                    });
                }
            },
            //选择单位
            mainOrgClickEvent: function (data) {
                console.log('单位数据:', data);
                this.formValidate.TopTitle = data[0].title;
                this.TopId = data[0].id;
                this.getOrgArr(data[0].id);
            },
            //选择部门
            orgClickEvent: function (data) {
                console.log('部门数据:', data);
                this.formValidate.orgTitle = data[0].title;
                this.Partid = data[0].id;
            },
            //获取单位数据
            getMainOrgData: function () {
                let that = this;

                let para = {};
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.GetUnitList, params, function (res) {
                    that.$Loading.finish();
                    if(res.Msg.length == 0){
                        that.$Notice.open({
                            title: '提示',
                            desc: '系统中暂无单位信息，请在组织结构中进行添加。'
                        });
                    }else {
                        res.Msg.forEach(function (item,index) {
                            item.expand =true;
                        })

                        that.mainorgData = res.Msg;
                        that.isShowModal =true;

                        console.log('mainorgdata:',that.mainorgData);
                    }

                });
            },
            //获取指定单位下的部门
            getOrgArr: function (id) {
                let that = this;

                let para = {
                    parentId: id,
                };

                this.$Loading.start();
                that.formValidate.orgTitle = '';
                that.Partid = '';
                apiUtil.get(that, apiUtil.urls.GetDeptList, para, function (res) {
                    that.$Loading.finish();
                    if (res.Msg.length <= 0) {
                        that.formValidate.orgTitle = '';
                        that.Partid = '';
                        that.$Notice.open({
                            title: '提示',
                            desc: '前选择项无部门信息，请他先添加部门之后再进行添加或编辑。'
                        });
                    }
                    that.orgData = res.Msg;
                });
            },

            //添加
            addData: function (model) {
                let that = this;
                let para = {
                    Account: model.Account,
                    Unitid: this.TopId,
                    Partid: this.Partid,
                    Rightlevelid: model.Rightlevelid,
                    Photo: this.imagePost[0],
                    Mypwd: model.Mypwd,
                    Phone: model.Phone.toString(),
                    Displayname: model.Displayname,
                    Sex: model.Sex,
                    Joindate: model.Joindate,
                    Cardid: model.Cardid,
                    Faceid: model.Faceid,
                    Idnumber: model.IdNumber,
                    Officernumber: model.Officernumber,
                    Militaryrank: model.Militaryrank,
                    Birthfromwhere: model.Birthfromwhere,
                    Edurank: model.Edurank,
                    Duty: model.Duty,
                };

                let params = that.$qs.stringify(para);


                apiUtil.post(that, apiUtil.urls.userCreateAll, params, function (res) {

                    that.newUserId = res.Msg;
                    that.$Modal.confirm({
                        title: '操作成功',
                        content: '请选择下一步操作',
                        okText: '继续添加',
                        cancelText: '返回列表',
                        onOk: () => {
                            baseUtil.pageJump(that, '', 'UserList')
                        },
                        onCancel: () => {
                            baseUtil.pageJump(that, '', 'UserList')
                        }
                    });
                })
            },
            changeStartDate: function (date) {
                console.log('开始允许时间段L：', date);
                this.formValidate.Joindate = date;
            },
            handleSubmit(name) {
                let that = this;
                let model = this.$refs[name].model;

                console.log('model:', model);
                this.addData(model);

            },
            /*
        * 图片
        * */

            uploadList() {
                let that = this;
                this.imageList = that.$refs.upload ? that.$refs.upload.fileList : [];
                console.log('this.imageList:', this.imageList);
            },
            //预览上传图片
            handleView(url) {
                this.seeImg = url;
                this.visible = true;
                console.log('预览照片')
            },
            //删除图片
            handleRemove(file) {
                // 从 upload 实例删除数据
                let that = this;

                that.imagePost = [];

                const fileList = this.$refs.upload.fileList;
                this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
                this.$refs.upload.fileList.forEach(function (item, i) {
                    that.imagePost.push(that.apiUtilBase + item.response.Msg);
                });

            },
            //上传成功
            handleSuccess(res, file) {
                let that = this;
                file.url = file.response.data;
                that.imagePost = [];

                console.log('this.$refs.upload:', this.$refs.upload.fileList);
                this.$refs.upload.fileList.forEach(function (item, i) {
                    that.imagePost.push(item.response.Msg);
                });
                console.log('this.imagePost:', this.imagePost)
            },
            //上传成功
            handleFormatError(file) {
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
                });
            },
            handleMaxSize(file) {
                this.$Notice.warning({
                    title: '超出文件大小限制',
                    desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
                });
            },
            handleBeforeUpload() {
                const check = this.imageList.length < 1;
                if (!check) {
                    this.$Notice.warning({
                        title: '最多只能上传1张图片。'
                    });
                }
                return check;
            }
        }
    }
</script>
